<template>
  <div class="overhaulApplication flowCloumn">
    <div class="constentmain h100">
      <div class="tableContent">
        <list-table-new
          v-bind="tableSetting"
          ref="klTable"
          @selectChange="selectChange"
          @defaultSelection="checkedUser"
        >
          <!-- <template slot="actionMiddle">
            <el-dropdown szie="small" trigger="click" @command="download">
              <el-button
                size="mini"
                class="el-icon-download"
                type="plain"
                style="margin: 0 -10px 0 10px"
              >
                导出
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="0">导出全部</el-dropdown-item>
                <el-dropdown-item :command="1">导出当前页</el-dropdown-item>
                <el-dropdown-item :command="2">导出选中项</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template> -->
        </list-table-new>
      </div>
      <div class="annotations list-table-main">
        注：
        <span class="circle normal-bg"></span>
        按期的工单
        <span class="circle remind-bg"></span>
        即将到期的工单
        <span class="circle warning-bg"></span>
        已超期的工单
        <span class="circle applyDely-bg">!</span>
        有延时申请批复
        <i
          class="el-icon-question"
          style="color: #81d3f8; font-size: 20px; cursor: pointer"
          @click="() => (showNotes = true)"
        ></i>
      </div>
    </div>
    <dialogPublic
      title="红绿灯说明"
      :show.sync="showNotes"
      :modal="false"
      width="50%"
      :dialogTop="500"
      :dialogLeft="100"
      :noFootBtn="true"
      @doClose="() => (showNotes = false)"
    >
      <ul class="note">
        <li>
          <span class="circle normal-bg"></span
          >按期的检修：【状态不为已归档，且计划结束时间-当前时间>工期*20%】或【状态为已归档，且实际结束时间≤计划结束时间】
        </li>
        <li>
          <span class="circle remind-bg"></span
          >即将到期的检修：【状态不为已归档，且计划结束时间>当前时间，且计划结束时间-当前时间≤工期*20%】
        </li>
        <li>
          <span class="circle warning-bg"></span
          >已超期的检修：【状态不为已归档，且当前时间≥计划结束时间】或【状态为已归档，且实际结束时间>计划结束时间】
        </li>
      </ul>
    </dialogPublic>
  </div>
</template>
<script>
import { overhaulApplicationList } from "@/api/orderManagement/overhaulApplication.js";
export default {
  data() {
    return {
      showNotes: false,
      tableSetting: {
        selectionShow: true,
        defaultSort: "status",
        defaultSortAsc: true,
        pageConfig: {
          pageCode: "overhaulApplication",
          userId: this.$store.getters.userInfo.namePy,
        },
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "organization",
              label: "设备管理单位",
              model: "deptManageName",
              idsStr: "deptManage",
            },
            {
              type: "device",
              label: "检修设备",
              model: "equipmentName",
            },
            {
              type: "text",
              label: "检修内容",
              model: "context",
            },
            {
              type: "select",
              label: "检修类型",
              model: "orderTypes",
              multiple: true,
              option: this.$store.getters.dirtData(
                "order_application_orderType"
              ),
            },
            {
              type: "select",
              label: "状态",
              model: "status",
              multiple: true,
              option: this.$store.getters.dirtData("order_application_status"),
            },
            {
              type: "select",
              label: "是否有延时申请",
              model: "hasDelay",
              option: [
                { label: "是", value: true },
                { label: "否", value: false },
              ],
            },
            {
              type: "工单编号",
              label: "编号",
              model: "code",
            },
            {
              type: "userOnly",
              label: "创建人",
              model: "createByName",
              idsStr: "createBy",
            },
            {
              type: "daterange",
              label: "创建时间",
              model: "createTime",
            },
          ],
        },
        addDropdown: {
          name: "导出",
          icon: "el-icon-download",
          content: "未授权功能",
          disabled: !this.$store.getters.isBtnAuth("import"),
          method: (command) => {
            let option = command.value;
            this.download(option);
          },
        },
        dropdownList: [
          { label: "导出全部", value: 0 },
          { label: "导出当前页", value: 1 },
          { label: "导出选中项", value: 2 },
        ],
        //过滤器的值
        filterFormData: {},
        //过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        actionList: [
          {
            name: "新建",
            icon: "el-icon-plus",
            content: "未授权功能",
            disabled: !this.$store.getters.isBtnAuth("add"),
            method: (row) => {
              this.goDetailPage(row, "overhaulApplicationDetails", "orderAdd");
            },
          },
        ],
        column: [
          {
            label: "状态",
            prop: "status",
            scopeType: "formate",
            sortable: "custom",
            width: 110,
            method: (row) => {
              let str = this.$store.getters.fineDirtDataName(
                "order_application_status",
                row.status
              );
              let color = this.statusColor[row.status];
              let dom = `<span style="color:${color}">${str}</span>`;
              if (row.delayCount > 0) {
                dom += `<span class="patCircle">!</span>`;
              }
              return dom;
            },
          },
          {
            label: "编号",
            prop: "code",
            sortable: "custom",
            showTooltip: true,
            width: 180,
          },
          {
            label: "标题",
            prop: "title",
            sortable: "custom",
            showTooltip: true,
            width: 320,
          },
          {
            label: "设备管理单位",
            prop: "deptManageName",
            showTooltip: true,
            minWidth: 160,
            sortable: "custom",
          },
          {
            label: "检修内容",
            prop: "context",
            showTooltip: true,
            sortable: "custom",
            minWidth: 150,
          },
          {
            label: "检修设备",
            prop: "equipmentName",
            minWidth: 150,
            showTooltip: true,
            //sortable: "custom",
            formatter: (row) => {
              return row.equipmentList
                .map((item) => item.equipmentName)
                .join(",");
            },
          },
          {
            label: "检修类型",
            prop: "orderType",
            sortable: "custom",
            minWidth: 120,
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "order_application_orderType",
                row.orderType
              );
            },
          },
          {
            label: "申请检修时间",
            subColumn: [
              {
                label: "开始",
                prop: "startTime",
                width: 150,
                scopeType: "formate",
                method: (row) => {
                  if (row.color == "#95F204") {
                    return `<span class="normal">${row.startTime}</span>`;
                  } else if (row.color == "#FAA224") {
                    return `<span class="remind">${row.startTime}</span>`;
                  } else {
                    return `<span class="warning">${row.startTime}</span>`;
                  }
                },
              },
              {
                label: "结束",
                width: 150,
                prop: "endTime",
              },
            ],
          },
          {
            label: "批准工作时间",
            subColumn: [
              {
                label: "开始",
                prop: "checkStartTime",
                width: 150,
              },
              {
                label: "结束",
                prop: "checkEndTime",
                width: 150,
              },
            ],
          },
          {
            label: "实际检修时间",
            minWidth: 200,
            subColumn: [
              {
                label: "开始",
                prop: "factStartTime",
                width: 150,
              },
              {
                label: "结束",
                prop: "factEndTime",
                width: 150,
              },
              {
                label: "时长",
                prop: "duration",
                width: 100,
                formatter: (row) => {
                  let time = row.duration / (60 * 60);
                  return time.toFixed(1);
                },
              },
            ],
          },
        ],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            this.goDetailPage(row, "overhaulApplicationDetails", "edit");
          },
        },
        isDisabled: (row) => {
          return row.status != "1" ? true : false;
        },
      },
      checkData: [],
      statusColor: {
        0: "",
        1: "#66FFFF",
        2: "#0070C0",
        3: "#FF3300",
        4: "#00B050",
        5: "#7A7A7A",
      },
    };
  },
  created() {
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.$refs.klTable.getTableConfig();
    //this.updateData();
  },
  methods: {
    updateData() {
      this.$refs.klTable.searchData();
    },
    // 获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
        // if (sortStr.filter((item) => item.column == "status").length == 0) {
        //   queryData.orders.push({
        //     column: "status",
        //     asc: true,
        //   });
        // }
      }
      overhaulApplicationList(queryData).then((res) => {
        this.$set(this.tableSetting, "tableData", res.data.list);
        this.$set(this.tableSetting, "totalNumber", res.data.total);
        this.checkedUser();
      });
    },
    //跳转到详情页
    goDetailPage(row, router, type) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          id: row ? row.id : "",
          pageType: type ? type : "",
          status: row.status,
        },
      });
      window.open(href, "_blank");
    },
    //勾选已选检修申请单
    checkedUser() {
      this.checkData.forEach((item) => {
        this.tableSetting.tableData.forEach((value) => {
          if (value.id == item) {
            this.$refs.klTable.selectioned(value);
          }
        });
      });
    },
    //添加或取消已选工单
    selectChange(selected, row) {
      if (selected) {
        this.checkData.push(row.id);
      } else {
        this.checkData.forEach((item, i) => {
          if (item === row.id) {
            this.checkData.splice(i, 1);
            return;
          }
        });
      }
    },
    //文件下载
    download(command) {
      let ids = "";
      let option = 0;
      let path = "";
      if (command == 0) {
        path = `eam-service-order/application/export?option=${option}`;
      } else if (command == 1) {
        option = 1;
        this.tableSetting.tableData.forEach((item) => {
          ids += `ids=${item.id}&`;
        });
        path = `eam-service-order/application/export?${ids}option=${option}`;
      } else {
        option = 2;
        if (this.checkData.length != 0) {
          this.checkData.forEach((item) => {
            ids += `ids=${item}&`;
          });
          path = `eam-service-order/application/export?${ids}option=${option}`;
        } else {
          this.$message.warning("请至少勾选一条数据");
          return;
        }
      }
      this.$utils.downloadFile(null, "检修申请单", path);
    },
  },
};
</script>
<style lang="less" scoped>
.overhaulApplication {
  min-height: 500px;
  height: 100%;
  // height: calc(100% - 10px);
  .constentmain {
    position: relative;
  }
  .tableContent {
    min-height: 500px;
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.note {
  margin: 15px 0;
  text-align: left;
  li {
    margin: 10px 0;
  }
}
.normal-bg {
  background: @kr-main-green-color;
}
.warning-bg {
  background: @kr-red-warn-color;
}
.remind-bg {
  background: @kr-main-yellow-color;
}
.applyDely-bg {
  background-color: #faa224;
  line-height: 12px;
  text-align: center;
  color: #f7f7f7;
}
/deep/.patCircle {
  display: inline-block;
  margin-left: 10px;
  width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  border-radius: 15px;
  font-weight: bold;
  font-size: 12px;
  background-color: #faa224;
  border: 1px solid rgba(223, 223, 223, 0.568);
  color: #f7f7f7;
}
</style>